<template>
  <tm-sheet  :padding="[20]" :margin="[0]"  v-for="(item,index) in PrimaryForms" :key="index">
    <view class="title">{{ item.name }}</view>
    <tm-form ref="form"  :margin="[0]"  :padding="[0]" :border="false" :model-value="item.data[0].after">
      <template v-for="(items,indexs) in item.fields" :key="indexs" >
        <tm-form-item 
          v-if="items.valueType === '时间型'"
          required 
          field="time" 
          placeholder="请选择"
          :show-error="false"
        >
          <slot>
            <tm-text :label="items.name" :_class="items.options.isRequired ?'required text-weight-b':'text-weight-b'" :font-size="28"></tm-text>
            <view @click="showTimePicker(item,items)" class="flex flex-row flex-row-center-between time-select">
              <tm-text :userInteractionEnabled="false" :label="item.data[0].after?.at(-1)[items.id] || '请选择时间'"></tm-text>
              <tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
            </view>
          </slot>
        </tm-form-item>
        <tm-form-item 
          v-else-if="items.valueType === '日期型'"
          required 
          field="time" 
          placeholder="请选择"
          :show-error="false"
        >
          <slot>
            <tm-text :label="items.name" :_class="items.options.isRequired ?'required text-weight-b':'text-weight-b'" :font-size="28"></tm-text>
            <view @click="showTimePicker(item,items)" class="flex flex-row flex-row-center-between time-select">
              <tm-text :userInteractionEnabled="false" :label="item.data[0].after?.at(-1)[items.id] || '请选择日期'"></tm-text>
              <tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
            </view>
          </slot>
        </tm-form-item>
        <tm-form-item
          v-else-if="items.valueType === '选择型'"
          :field="items.id"
          :show-error="false"
        >
          <slot>
            <tm-text :label="items.name" :_class="items.options.isRequired ?'required text-weight-b':'text-weight-b'" :font-size="28"></tm-text>
            <view @click="popupPicker(item,items)" class="flex flex-row flex-row-center-between time-select">
              <tm-text :userInteractionEnabled="false" :label="getFieldText(item.data[0].after?.at(-1)[items.id],items)"></tm-text>
              <tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
            </view>
          </slot>
        </tm-form-item>
        <tm-form-item
          v-else-if="items.valueType === '附件型'"
          :field="items.id"
          :show-error="false"
        >
          <slot>
            <tm-text :label="items.name" :_class="items.options.isRequired ?'required text-weight-b':'text-weight-b'" :font-size="28"></tm-text>
            <!-- <tm-upload-file 
              model-value=""
              :config="{hostUrl:'https://mockapi.eolink.com/tNYKNA7ac71aa90bcbe83c5815871a5b419601e96a5524d/upload'}" 
            ></tm-upload-file> -->
          </slot>
        </tm-form-item>
        <template  v-else-if="items.valueType === '分类型'">
          <tm-form-item
            :field="items.id"
            :show-error="false"
          >
            <slot>
              <tm-text :label="items.name" :_class="items.options.isRequired ?'required text-weight-b':'text-weight-b'" :font-size="28"></tm-text>
              <view @click="popupPicker(item,items)" class="flex flex-row flex-row-center-between time-select">
                <tm-text :userInteractionEnabled="false" :label="getText(item.data[0].after?.at(-1)[items.id],items)"></tm-text>
                <tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
              </view>
            </slot>
          </tm-form-item>
        </template>
        <tm-form-item
          v-else
          :field="items.id"
          :show-error="false"
        >
          <slot>
            <tm-text :label="items.name" :_class="items.options.isRequired ?'required text-weight-b':'text-weight-b'" :font-size="28"></tm-text>
            <tm-input
              :transprent="true"
              model-value=""
              :label="items.name"
              placeholder="请输入"
              :border="1"
              :margin="[0,10]"
              :disabled="items.options.readOnly ? true : false"
              @input="changeData(item,items,$event)"
            >
            </tm-input>
          </slot>
        </tm-form-item>
      </template>
    </tm-form>
  </tm-sheet>
  <!-- 时间选择器 -->
  <tm-time-picker
    :showDetail="showDateDetail"
    v-model:show="showTimePickerView"
    format="YYYY年MM月DD日"
    @confirm ="selectDate"
  ></tm-time-picker>
  <!-- 下拉选择 -->
  <tm-picker
    :columns="pickerlist"
    v-model:show="showPicker"
    :modelStr="modelStr"
    @confirm="pickok"
  ></tm-picker>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
type IProps = {
  formInfo: any
}
const props = defineProps<IProps>()
console.log(props,'props');

const showTimePickerView = ref(false)
const showDateDetail = ref({
  year: true,
  month: true,
  day: true,
  hour: true,
  minute: true,
  second: true
})
const primary = computed(() =>{
  return props.formInfo.primary
})
const PrimaryForms = computed(() => {
  const formData:{
    fields:any,
    data:any,
    node: {
      primaryForms:any
    }
  } = props.formInfo

  const arr:{
    id: any,
    name: any,
    fields:any,
    data:any,
  }[] = []
  formData.node?.primaryForms.forEach((element: { id: string | number; name: any }) =>{
    const _fdata = {
      id: element.id,
      name: element.name,
      fields: formData.fields[element.id],
      data: formData.data[element.id],
    }
    arr.push(_fdata)
  })
  return arr
})
// 下拉选择处理
const showPicker = ref(false)
const pickerlist = ref([])
// const pickData = ref([])
const changeItems = ref({})
const changeItem = ref({})
// 显示选择器
function popupPicker(item:any ,data:any) {
  changeItem.value = item
  changeItems.value = data
  showPicker.value = !showPicker.value
  if(data.valueType === '分类型'){
    // pickData.value = data.lookups
    // if(pickerlist .value.length <= 0)
    let list:{
      id: any,
      icon:any,
      parentId:any,
      text:any,
      value:any,
      children:any
    }[] = []
    list = data.lookups.filter(element => !element.parentId)
    list.forEach((items) => {
      items.children =  data.lookups.filter((element:any) => element.parentId === items.id)
    })
    pickerlist.value = list
    
  }else{
    pickerlist.value = data.lookups
  }
}
function showTimePicker(item:any,data:any) {
  if(data.valueType === '日期型'){
    showDateDetail.value =  {
      year: true,
      month: true,
      day: true,
      hour: false,
      minute: false,
      second: false
    }
  }else{
    showDateDetail.value =  {
      year: true,
      month: true,
      day: true,
      hour: true,
      minute: true,
      second: true
    }
  }
  changeItem.value = item
  changeItems.value = data
  showTimePickerView.value = !showTimePickerView.value

}
// 下拉选择器选择
const modelStr = ref('')
function pickok(data: any){
  if(changeItems.value?.valueType === '选择型'){
    const selectData:{
      id:any,
      icon:any,
      parentId:any,
      text:any,
      value:any
    } = pickerlist.value[data]
    changeItem.value.data[0].after.at(-1)[changeItems.value.id] = selectData.value
    primary.value[changeItems.value.id] = selectData.value
  }else{
    const selectData:{
      id:any,
      icon:any,
      parentId:any,
      text:any,
      value:any
    } = pickerlist.value[data[0]].children[data[1]]
    changeItem.value.data[0].after.at(-1)[changeItems.value.id] = selectData.value
    primary.value[changeItems.value.id] = selectData.value
  }
}
function changeData(item:any,items:any,data:any) {
  item.data[0].after.at(-1)[items.id] = data
  primary.value[items.id] = data
}
function getFieldText(data:any,items:any){
  let text:any = '请选择'
  items.lookups.forEach((element) => {
    if(element.value === data){
      text = element.text
    }
    
  })
  return text
}

function getText(data:any,items:any) {
  let text:any = '请选择'
  let parentId:any = ''
  let childText:any = ''
  items.lookups.forEach((element) => {
    if(element.value === data) {
      parentId = element.parentId
      childText = element.text
    }
  })
  const parentList = items.lookups.filter(items => !items.parentId)
  parentList.forEach((items) => {
    if(items.id === parentId) {
      text = items.text + '>' + childText
    }
  })
  return text
}

function selectDate(data: string) {
  if(changeItems.value.valueType === '日期型'){
    data = data.split(' ')[0]
  }
  changeItem.value.data[0].after.at(-1)[changeItems.value.id] = data
  primary.value[changeItems.value.id] = data
}
</script>

<style lang="scss">
  .title{
    display:flex;
    align-items:center;
    font-size: 14px;
    font-weight: 500;
    margin: 10px 0;
    &:before{
      content: '';
      display:inline-block;
      width:3px;
      height: 16px;
      background:#366EF4;
      margin-right: 10px;
    }
  }
  .time-select{
    height: 33px;
    border: 1px solid rgba(230,230,230,1);
    border-radius: 6px;
    padding:0 5px;
    margin-top: 5px;
  }

</style>